<template>
    <view>
        <!-- 渲染顶部的行 -->
        <view class="menu-row-top flex-row" v-if="modelsTop.length > 0">
            <view
                v-for="model in modelsTop"
                :key="model.c_menu_code"
                @click="() => handleMenuClick(model)"
                class="menu-item"
            >
                <view class="flex-row menu-row-2" :style="{ 'background-color': model.c_start_color }">
                    <view class="img-box">
                        <image src="../static/img/avatar_male.png" mode="scaleToFill" class="image" />
                    </view>
                    <view class="right-box">
                        <text class="title ellipsis-line-2">{{ model.c_menu_title }}</text>
                        <text class="description text-ellipsis">{{ model.c_menu_title }}</text>
                    </view>
                </view>
            </view>
        </view>

        <!-- 渲染底部的行 -->
        <eui-grid :column="4" :showBorder="false" highlight class="menu-row-bottom" v-if="modelsBottom.length > 0">
            <eui-grid-item v-for="model in modelsBottom" :key="model.c_menu_code">
                <view class="grid-item-box flex-column-center" @click="() => handleMenuClick(model)">
                    <view class="img-box flex-row-center" :style="{ 'background-color': model.c_start_color }">
                        <image src="../static/img/avatar_male.png" mode="scaleToFill" class="image" />
                    </view>
                    <text class="title ellipsis-line-2">{{ model.c_menu_title }}</text>
                </view>
            </eui-grid-item>
        </eui-grid>
    </view>
</template>

<script setup lang="ts">
import { defineProps } from 'vue';

const props = defineProps<{
    modelsTop: any[];
    modelsBottom: any[];
    onTapMenu: (item: any) => void;
}>();

const handleMenuClick = (item: any) => {
    props.onTapMenu(item);
};
</script>


<style scoped lang="scss">
/* 添加样式 */

.menu-row-top {
    padding: 0 14px 14px;
    width: 100%;
    flex-wrap: wrap;
    box-sizing: border-box;
    gap: 12px;
    .menu-item {
        flex: 0 0 48%;
    }
    .menu-row-2 {
        padding: 0 10px;
        height: 60px;
        align-items: center;
        border-radius: 10px;
        box-sizing: border-box;
        .img-box {
            margin-right: 8px;
            width: 32px;
            height: 32px;
        }
        image {
            width: 100%;
            height: 100%;
        }
        .right-box {
            width: 0;
            flex: 1;
        }
        .title {
            font-size: 12px;
            color: $enjoy-color-title;
            font-weight: 500;
            font-family: PingFangSC, PingFang SC;
        }
        .description {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 10px;
            color: #888888;
            color: #888888;
        }
    }
}
.menu-row-bottom {
    margin: 12px 8px;
    width: calc(100% - 16px);
    .img-box {
        margin-bottom: 4px;
        width: 44px;
        height: 44px;
        border-radius: 16px;
        .image {
            width: 32px;
            height: 32px;
        }
    }
    .title {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 12px;
        color: #000000;
    }
}
</style>
